<template>
  <div class="home">
    <ul>
      <numberScroll v-for="(num, index) in splitToDigit(number)" :key="index" as="li" :i="num" color="#2DF1A0"
        width="35px">
      </numberScroll>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
// 引入组件
import numberScroll from "@/components/numberScroll.vue";
// 数字
const number = ref(10);
setInterval(() => {
  number.value++;
}, 2000)

// 分割数字成单数字数组
const splitToDigit = (n: number) => {
  return (`${n}`).split(``).map(Number);
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  >ul {
    display: flex;
    align-items: center;
  }
}
</style>